<template>
  <div class="upcoming-content-box">
    <div class="upcoming-title">今晚12点上线</div>
    <div class="upcoming-content">
      <div class="big-img">
        大图
        <!-- 时间 -->
        <div class="big-img-time">3:333</div>
      </div>
      <div class="upcoming-middle">
        <!-- 下半边盒子上半部分 -->
        <div class="upcoming-middle-top">
          <!-- 图片盒子标题人物合集 -->
          <div class="user-tab-text">
            <!-- 小图片 -->
            <div class="samll-img">小图片</div>
            <!-- 标题 tab类别 -->
            <div class="all-box">
              <!-- 电影名  -->
              <div class="movie-name">特战先锋</div>
              <div class="all-tabs">
                <div class="samll-tab">标签</div>
              </div>
              <div class="intro">很长很长的简介</div>
            </div>
          </div>
          <div class="middle-bottom">内容说明</div>
        </div>
        <div class="state">
          <div class="state-man-num">已预约人数</div>
          <div class="state-btn">预约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FissionFriendsH5Titlechunk',

  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.upcoming-content-box {
  margin: 16px;
  //   margin-top: 230px;
  //   标题部分
  .upcoming-title {
    width: 108px;
    height: 20px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #e7e8ea;
  }
  //   内容部分
  .upcoming-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: relative;
    width: 343px;
    height: 373.33px;
    margin-top: 8px;
    /* background/color-background-card-dark */
    background-color: #e7e8ea;
    // background: ;
    border-radius: 4px;
    .big-img {
      position: relative;
      width: 343px;
      height: 196px;
      background-color: aqua;
      .big-img-time {
        position: absolute;
        right: 8px;
        bottom: 8px;
      }
      //   background: url(电影海报《摘下你的面具》 横板海报@壹树bro郑采集到郑建强的原创画板70图_花瓣.jpg);
    }
    // 中等盒子
    .upcoming-middle {
      /* Frame 723 */

      /* Auto layout */

      display: flex;
      //   flex-direction: column;
      padding: 0px;

      position: absolute;
      width: 311px;
      height: 145.33px;
      left: 16px;
      bottom: 16px;
      background-color: pink;
      //   中等盒子上半部分
      .upcoming-middle-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;

        position: static;
        width: 311px;
        height: 111.33px;
        left: 0px;
        top: 0px;
        background-color: aliceblue;
        //   标题 标签 图片部分
        .user-tab-text {
          /* Auto layout */
          position: relative;
          display: flex;
          padding: 0px;
          width: 311px;
          height: 85.33px;
          background-color: skyblue;
          //   小图片
          .samll-img {
            // position: absolute;
            width: 64px;
            height: 95px;
            // left: 0px;
            margin-top: -5px;
            margin-right: 8px;
            background-color: aquamarine;
          }
          //   内容部分
          .all-box {
            /* Auto layout */
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            width: 208px;
            height: 80px;
            left: 72px;
            top: 5.33px;
            background-color: azure;
            // 电影名
            .movie-name {
              width: 84px;
              height: 24px;

              font-family: 'PingFang SC';
              font-style: normal;
              font-weight: 500;
              font-size: 14px;
              line-height: 24px;
              /* identical to box height, or 171% */

              /* text/color-text-primary-dark */

              color: #e7e8ea;

              /* Inside auto layout */
              margin: 4px 0px;
            }
            .all-tabs {
              display: flex;
              flex-direction: row;
              align-items: flex-start;
              padding: 0px;
              width: 208px;
              height: 24px;
              background-color: antiquewhite;
              /* Inside auto layout */
              //   margin: 8px 0px;
              .samll-tab {
                /* 1700 */
                display: flex;

                justify-content: center;
                align-items: center;
                // padding: 2px 4px;
                width: 56px;
                height: 24px;
                /* background/color-background-tag-dark */
                background: #ccc;
                border-radius: 12px;
                /* Inside auto layout */
              }
            }
            .intro {
              width: 158px;
              height: 16px;
              font-family: 'PingFang SC';
              font-style: normal;
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
              /* identical to box height, or 133% */
              display: flex;
              align-items: center;
              margin-top: 8px;
            }
          }
        }
        .middle-bottom {
          margin-top: 5.33px;
        }
      }
      .state {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        // padding: 4px 16px;
        bottom: 8px;
        right: 8px;
        .state-man-num {
          margin-right: 10px;
          width: 70px;
          height: 24px;

          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 24px;
          /* identical to box height, or 200% */

          display: flex;
          align-items: center;

          /* text/color-text-regular-dark */

          color: #747880;
        }
        .state-btn {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          width: 80px;
          height: 24px;

          /* background/color-background-tag-dark */
          color: #e7e8ea;
          background: #1f2022;
          border-radius: 4px;

          /* Inside auto layout */
        }
      }
    }
  }
}
</style>
